<template>
	<div>
		<mj-title type="h2" title="Tree 树形控件"></mj-title>
		<div class="page-desc">用清晰的层级结构展示信息，可展开或折叠。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-tree :data="data" @click="click"></mj-tree>
				<ul class="page-list">
					<li>如果当前选中项有状态，data数据需要有key值</li>
				</ul>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
        <pre>
          <code class="language-html line-numbers">
          &lt;template>
          	&lt;mj-tree :data="data" @click="click">&lt;/mj-tree>
          &lt;/template>
          &lt;script>
          export default {
            data() {
              return {
                data: [{
                  name: '广东',
                  children: [
                  {
                    name: '广州市',
                    children: [
                    {name: '天河区'},
                    {name: '越秀区'},
                    {name: '白云区'},
                    {name: '海珠区'}
                    ]
                  },
                  {name: '深圳市'},
                  {name: '东莞市'},
                  {name: '湛江市'},
                  {name: '阳江市'},
                  {name: '清远市'}
                  ]
                },
                {name: '北京'},
                {name: '上海'},
                {
                  name: '广西',
                  children: [
                  {name: '桂林市'},
                  {name: '南宁市'}
                  ]
                }],      
              }
            },
            methods:{
              click(item) {
                console.log('click',item)
              },  
            }
          }
          &lt;/script>
          </code>
        </pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="展开指定项"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-tree :data="data2" @click="click"></mj-tree>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
        <pre>
          <code class="language-html line-numbers">
          &lt;template>
          &lt;mj-tree :data="data2" @click="click">&lt;/mj-tree>
          &lt;/template>
          &lt;script>
          export default {
            data() {
              return {
                data2: [
                  {
                    name: '广东',
                    show: true,
                    children: [
                      {name: '广州市', key: 'gg'},
                      {name: '深圳市', key: 'bj'}
                    ]
                  },
                  {name: '北京', children: []},
                  {name: '广西', key: 'gx'},
                  {name: '福建', key: 'fj'},
                  {name: '湖南', key: 'hn'}
                ],    
              }
            },
            methods:{
              click(item) {
                console.log('click',item)
              },  
            }
          }
          &lt;/script>
          </code>
        </pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="选中值"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-tree :data="data3" value="gg"></mj-tree>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
        <pre>
          <code class="language-html line-numbers">
          &lt;template>
          	&lt;mj-tree :data="data3" value="gg">&lt;/mj-tree>
          &lt;/template>
          &lt;script>
          export default {
            data() {
              return {
                data3: [
                  {name: '广东', key: 'gg'},
                  {name: '北京', key: 'bj'}
                ],
              }
            },
          }
          &lt;/script>
          </code>
        </pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="异步加载"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-tree :data="data4" :toggle="_toggle" :lazy="true"></mj-tree>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
        <pre>
          <code class="language-html line-numbers">
          &lt;template>
          	&lt;mj-tree :data="data4" :toggle="_toggle" :lazy="true">&lt;/mj-tree>
          &lt;/template>
          &lt;script>
          export default {
            data() {
              return {
                data4: [
                  {name: '广东', children: []},
                  {name: '北京', children: []},
                  {name: '广西', children: []}
                ],
              }
            },
            methods:{
              _toggle(item) {
                // 这里可根据需求限制每次点击都请求加载数据
                // item.show=true为展开,false收起
                console.log('toggle',item)
                if (!item.show || item.children.length > 0) {
                  return
                }
                let data = []
                if (item.name === '广东') {
                  data = [
                  {name: '深圳市'},
                  {name: '东莞市'},
                  {name: '湛江市'},
                  {name: '阳江市'},
                  {name: '清远市'}
                  ]
                }
                if (item.name === '北京') {
                  data = [
                  {name: '海淀区'}
                  ]
                }
                if (item.name === '广西') {
                  data = ['广西地区暂无数据']
                }
                // 延时模拟请求加载
                setTimeout(() => {
                  item.children = data
                }, 1500)
              },
            }
          }
          &lt;/script>
          </code>
        </pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="可勾选"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
				<mj-tree :data="data5" :showCheckbox="true" ref="checkboxTree"></mj-tree>
				<ul class="page-list">
					<li>可勾选时，必须要带key值</li>
					<li>对数组设值，1、当仅对父节点设值时，并不会全选子节点；</li>
					<li>2、节点设值时父节点会受子节点的影响，被设为全选或部分选择状态，当同时对父节点设值时，最终会根据子节点重置；</li>
					<li>3、设值后最终结果，广东受子节点影响被重置为部分选择状态，广州却被勾上</li>
				</ul>
				<mj-button @click="setValue">对广东，广州，深圳，北京设值</mj-button>
				<mj-button @click="getValue">取值（终端输出）</mj-button>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
        <pre>
          <code class="language-html line-numbers">
          &lt;template>
          	&lt;mj-tree :data="data5" :showCheckbox="true" ref="checkboxTree">&lt;/mj-tree>
          	&lt;mj-button @click="setValue">对广东，广州，深圳，北京设值&lt;/mj-button>
          	&lt;mj-button @click="getValue">取值（终端输出）&lt;/mj-button>
          &lt;/template>
          &lt;script>
          export default {
            data() {
              return {
                data5: [
                  {
                    show: true,
                    name: '广东',
                    key: 't1',
                    children: [
                    {
                      key: 't2',
                      name: '广州市',
                      children: [
                      {name: '天河区', key: 't3'},
                      {name: '越秀区', key: 't4'},
                      {name: '白云区', key: 't5'},
                      {name: '海珠区', key: 't6'}
                      ]
                    },
                    {name: '深圳市', key: 't7'},
                    {name: '东莞市', checked: true, key: 't8'},
                    {name: '湛江市', key: 't9'},
                    {name: '阳江市', key: 't10'},
                    {name: '清远市', key: 't11'}
                    ]
                  },
                  {name: '北京', key: 't12'},
                  {name: '上海', key: 't13'},
                  {
                    name: '广西',
                    key: 't14'
                  },
                  {
                    name: '广西2',
                    key: 't15'
                  }
                ],
              }
            },
            methods:{
              getValue() {
                const val = this.$refs.checkboxTree.getValue()
                console.log(val)
              },
              setValue() {
                const key = ['t1', 't2', 't7', 't12']
                this.$refs.checkboxTree.setValue(key)
              },
            }
          }
          &lt;/script>
          </code>
        </pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="支持scoped slot自定义"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
<!-- 				<mj-tree :data="data5">
					<span class="expand" slot-scope="scope">
						<a><Icon type="add" /></a>
						<a><Icon type="edit" /></a>
						<a><Icon type="delete" /></a>
					</span>
				</mj-tree> -->
				<mj-tree :data="data2">
					<span class="expand" slot-scope="{row,index,parent}">
						<a @click="treeAdd(row,index,parent)"><Icon type="add" /></a>
						<a @click="treeEdit(row,index,parent)"><Icon type="edit" /></a>
						<a @click="treeDel(row,index,parent)"><Icon type="delete" /></a>
					</span>
				</mj-tree>
				<ul class="page-list">
					<li>支持scoped slot自定义，`slot-scope="{row,index,parent}"` row当前行信息,index当前行所在数组位置下标,parent父级的index</li>
				</ul>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
        <pre>
          <code class="language-html line-numbers">
          &lt;template>
          	&lt;mj-tree :data="data2">
          		&lt;span class="expand" slot-scope="{row,index,parent}">
          			&lt;a @click="treeAdd(row,index,parent)">&lt;Icon type="add" />&lt;/a>
          			&lt;a @click="treeEdit(row,index,parent)">&lt;Icon type="edit" />&lt;/a>
          			&lt;a @click="treeDel(row,index,parent)">&lt;Icon type="delete" />&lt;/a>
          		&lt;/span>
          	&lt;/mj-tree>
          &lt;/template>
          &lt;script>
          export default {
            data() {
              return {
                data2: [
                  {
                    name: '广东',
                    show: true,
                    children: [
                      {name: '广州市', key: 'gg'},
                      {name: '深圳市', key: 'bj'}
                    ]
                  },
                  {name: '北京', children: []},
                  {name: '广西', key: 'gx'},
                  {name: '福建', key: 'fj'},
                  {name: '湖南', key: 'hn'}
                ],
              }
            },
            methods:{
              treeAdd(row,index,parent) {
                console.log('add',row,index,parent)
              },
              ......
            }
          }
          &lt;/script>
          </code>
        </pre>
			</mj-tab-pane>
		</mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Tree 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>data</td>
            		<td>数据</td>
            		<td>Array</td>
            		<td>-</td>
            	</tr>
            	<tr>
            		<td>showValue</td>
            		<td>是否在名称后面显示对应的value值</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            	<tr>
            		<td>showCheckbox</td>
            		<td>显示勾选</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            	<tr>
            		<td>toggle</td>
            		<td>展开或收起点击事件，回调两个参数。当前项和当事点击事件（展开/收起）</td>
            		<td>Function</td>
            		<td></td>
            	</tr>
            	<tr>
            		<td>click</td>
            		<td>点击事件</td>
            		<td>Function</td>
            		<td></td>
            	</tr>
            	<tr>
            		<td>change</td>
            		<td>checkbox改变事件</td>
            		<td>Function</td>
            		<td></td>
            	</tr>
            	<tr>
            		<td>lazy</td>
            		<td>是否异步加载</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            	<tr>
            		<td>value</td>
            		<td>当前选中值，匹配data中的key</td>
            		<td>String</td>
            		<td>-</td>
            	</tr>
            </tbody>
        </table>

        <mj-title type="h6" title="Tree Data"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>参数</th>
                    <th>类型</th>
                    <th>说明</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>name</td>
            		<td>显示的名称</td>
            		<td>String</td>
            		<td></td>
            	</tr>
            	<tr>
            		<td>show</td>
            		<td>是否展开当前项</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            	<tr>
            		<td>key</td>
            		<td>唯一值，当showCheckbox=true时取值和赋值根据key值，同时匹配value</td>
            		<td>String</td>
            		<td></td>
            	</tr>
            	<tr>
            		<td>checked</td>
            		<td>当前项为勾选状态，仅当showCheckbox=true时有效</td>
            		<td>Boolean</td>
            		<td></td>
            	</tr>
            	<tr>
            		<td>disabled</td>
            		<td>当前项禁用勾选，仅当showCheckbox=true时有效</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            </tbody>
        </table>

	</div>
</template>

<script>
export default {
	data () {
		return {
			data: [{
				name: '广东',
				children: [
				{
					name: '广州市',
					children: [
						{name: '天河区'},
						{name: '越秀区'},
						{name: '白云区'},
						{name: '海珠区'}
					]
				},
				{name: '深圳市'},
				{name: '东莞市'},
				{name: '湛江市'},
				{name: '阳江市'},
				{name: '清远市'}
				]
			},
			{name: '北京'},
			{name: '上海'},
			{
				name: '广西',
				children: [
				{name: '桂林市'},
				{name: '南宁市'}
				]
			}],
			data2: [
				{
					name: '广东',
					show: true,
					children: [
						{name: '广州市', key: 'gg'},
						{name: '深圳市', key: 'bj'}
					]
				},
				{name: '北京', children: []},
				{name: '广西', key: 'gx'},
				{name: '福建', key: 'fj'},
				{name: '湖南', key: 'hn'}
			],
			data3: [
				{name: '广东', key: 'gg'},
				{name: '北京', key: 'bj'}
			],
			data4: [
				{name: '广东', children: []},
				{name: '北京', children: []},
				{name: '广西', children: []}
			],
			data5: [
				{
					show: true,
					name: '广东',
					key: 't1',
					children: [
					{
						key: 't2',
						name: '广州市',
						children: [
							{name: '天河区', key: 't3'},
							{name: '越秀区', key: 't4'},
							{name: '白云区', key: 't5'},
							{
								name: '海珠区', 
								key: 't6',
								children: [
									{name: '天河区', key: 't22'},
									{name: '越秀区', key: 't23'},
									{name: '白云区', key: 't24'},
									{
										name: '海珠区', key: 't25',
										children: [
											{name: '天河区', key: 't26'},
											{name: '越秀区', key: 't27'},
											{name: '白云区', key: 't28'},
										]
									}
								]
							}
						]
					},
					{name: '深圳市', key: 't7'},
					{name: '东莞市', checked: true, key: 't8'},
					{name: '湛江市', key: 't9'},
					{name: '阳江市', key: 't10'},
					{name: '清远市', key: 't11'}
					]
				},
				{name: '北京', key: 't12'},
				{name: '上海', key: 't13'},
				{
					name: '广西',
					key: 't14'
				},
				{
					name: '广西2',
					key: 't15'
				}
			],
		}
	},
	methods:{
		click(item) {
			console.log('click',item)
		},
		_toggle(item) {
			// 这里可根据需求限制每次点击都请求加载数据
			// item.show=true为展开,false收起
			console.log('toggle',item)
			if (!item.show || item.children.length > 0) {
				return
			}
			let data = []
			if (item.name === '广东') {
				data = [
				{name: '深圳市'},
				{name: '东莞市'},
				{name: '湛江市'},
				{name: '阳江市'},
				{name: '清远市'}
				]
			}
			if (item.name === '北京') {
				data = [
				{name: '海淀区'}
				]
			}
			if (item.name === '广西') {
				data = ['广西地区暂无数据']
			}
			// 延时模拟请求加载
			setTimeout(() => {
				item.children = data
			}, 1500)
		},
		getValue() {
			const val = this.$refs.checkboxTree.getValue()
			console.log(val)
		},
		setValue() {
			const key = ['t1', 't2', 't7', 't12']
			this.$refs.checkboxTree.setValue(key)
		},
		treeAdd(row,index,parent) {
			console.log('add',row,index,parent)
		},
    treeEdit(row,index,parent) {
      console.log('edit',row,index,parent)
    },
    treeDel(row,index,parent) {
      console.log('del',row,index,parent)
    },
	}
}
</script>

<style>
.page-list {margin-top: 10px;}
</style>